<template>
  <div class="scatter">
    <div class="tip">{{$t('public.scatterTip1')}}</div>
    <div class="tip">{{$t('public.scatterTip2')}}</div>
    <div class="tip blue">{{$t('public.scatterTip3')}}</div>
    <div class="tip"><el-button class="btn" type="primary" @click="handleToScatter">{{$t('public.install')}}</el-button></div>
    <div class="what">
      <a :href="helpCenter[$store.state.app.language]" target="_blank" @click="handleToHelp" class="fr mr5 blue">
        {{$t('public.whatScatter')}}
      </a>
      <span style="color:#999" class="fr">{{$t('public.whatTip')}}</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      helpCenter: {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360012588951-%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8scatter',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360012588951-%E6%80%8E%E9%BA%BC%E4%BD%BF%E7%94%A8Scatter',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360012588951-How-to-use-scatter-'
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleToHelp() {
      // this.$router.push('/help-center');
      this.$emit('listenScatterClose', false);
    },
    handleToScatter() {
      location.href = 'https://chrome.google.com/webstore/detail/scatter/ammjpmhgckkpcamddpolhchgomcojkle';
    },
  },
}
</script>

<style scoped lang="scss">
.scatter{
  text-align: center;
  padding-bottom: 8px;
  margin-top: -10px;
  color: #777;

  .tip{
    padding: 8px;

    .btn{
      width: 60%;
    }
  }

  .what{
    overflow: hidden;
    width: 60%;
    margin: 0px auto;
  }

  .mr200{
    margin-right: 20%;
  }

  .blue{
    color: cornflowerblue;
  }
}
</style>
